<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Jiahua Admin Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content=" admin template.">
<meta name="author" content="Muhammad Usman">

<!-- The styles -->
<link id="bs-css" href="css/bootstrap-cerulean.css" rel="stylesheet">
<style type="text/css">
body {
	padding-bottom: 40px;
}

.sidebar-nav {
	padding: 9px 0;
}
</style>
<link href="css/bootstrap-responsive.css" rel="stylesheet">
<link href="css/charisma-app.css" rel="stylesheet">
<link href="css/jquery-ui-1.8.21.custom.css" rel="stylesheet">
<link href='css/fullcalendar.css' rel='stylesheet'>
<link href='css/fullcalendar.print.css' rel='stylesheet' media='print'>
<link href='css/chosen.css' rel='stylesheet'>
<link href='css/uniform.default.css' rel='stylesheet'>
<link href='css/colorbox.css' rel='stylesheet'>
<link href='css/jquery.cleditor.css' rel='stylesheet'>
<link href='css/jquery.noty.css' rel='stylesheet'>
<link href='css/noty_theme_default.css' rel='stylesheet'>
<link href='css/elfinder.min.css' rel='stylesheet'>
<link href='css/elfinder.theme.css' rel='stylesheet'>
<link href='css/jquery.iphone.toggle.css' rel='stylesheet'>
<link href='css/opa-icons.css' rel='stylesheet'>
<link href='css/uploadify.css' rel='stylesheet'>

<!-- Jcrop css -->
<link href="css/jcrop/demos.css" rel="stylesheet" type="text/css" /> 
<link href="css/jcrop/jquery.Jcrop.css" rel="stylesheet" type="text/css" />

<!-- The fav icon -->
<link rel="shortcut icon" href="img/favicon.ico">
</head>

<body>
	<!-- Header file -->
	<jsp:include page="100-header.jsp" flush="true" />
	<div class="row-fluid">

		<!-- Header file -->
		<jsp:include page="100-menu.jsp" flush="true" />

		<noscript>
			<div class="alert alert-block span10">
				<h4 class="alert-heading">Warning!</h4>
				<p>
					You need to have <a href="http://en.wikipedia.org/wiki/JavaScript" target="_blank">JavaScript</a> enabled to use this site.
				</p>
			</div>
		</noscript>

		<div id="content" class="span10">
			<!-- content starts -->
			<div>
				<ul class="breadcrumb">
					<li><a href="#">Home</a> <span class="divider">/</span></li> <li><a href="#">Inventory Item</a></li>
				</ul>
			</div>

			<!-- 01. Table one Start -->
			<div class="row-fluid sortable">
				<div class="box span12">
					<div class="box-header well" data-original-title>
						<h2> <i class="icon-user"></i>Inventory Item</h2>
						<div class="box-icon">
							<a href="#" class="btn btn-setting btn-round"> <i class="icon-cog"></i></a> 
							<a href="#" class="btn btn-minimize btn-round"> <i class="icon-chevron-up"></i></a> 
							<a href="#" class="btn btn-close btn-round"> <i class="icon-remove"></i></a>
						</div>
					</div>
					<div class="box-content">
						<form class="form-horizontal" name="myForm" enctype="multipart/form-data" method="post" action="saveInventoryItemAction.do" onsubmit="return checkForm()">
						<fieldset>
						            
									<legend> Category Item Registration</legend>
									<table  border="1" > 
										<tr>
											<!-- left -->
											<td width="45%">
												<table>
												
												    <!-- Row01 Category Name -->
													<tr>
														<td>
															<label class="control-label" for="typeahead">Category Name</label>
															<div class="controls">
																
																 <select name="categoryID" id="categoryID">
																     <s:iterator value="inventoryCategoryList" status="stat">
																     	<option  id="address1" value='<s:property value="categoryID"/>' ><s:property value="categoryName"/></option>
																     </s:iterator>
																</select>
															</div>
														</td>
													</tr>
													
													<!-- Row02 Category Title -->
													<tr>
														<td>
															<label class="control-label" for="typeahead">Category Title</label>
															<div class="controls"><input type="text" class="span6 typeahead" id="title" name="title" value=""></div>
														</td>
													</tr>
													
													<!-- Row03 Category Title -->
													<tr>
														<td>
															<label class="control-label" for="appendedPrependedInput">Category Price</label>
															<div class="controls">
																<div class="input-prepend input-append">
																	<span class="add-on">$</span><input id="price" name="price" size="16" type="text"><span
																		class="add-on">.00</span>
																</div>
															</div>
														</td>
													</tr>
													
													<!-- Row04 Category Weight -->
													<tr>
														<td>
															<label class="control-label" for="typeahead">Category Weight</label>
															<div class="controls"><input type="text" class="span6 typeahead" id="weight" name="weight" value=""></div>
														</td>
													</tr>
													
													<!-- Row05 Category Quantity -->
													<tr>
														<td>
															<label class="control-label" for="typeahead">Category Quantity</label>
															<div class="controls"><input type="text" class="span6 typeahead" id="quantity" name="quantity" value=""></div>
														</td>
													</tr>
													
													<!-- Row06 Category Short Desc -->
													<tr>
														<td>
															<label class="control-label" for="typeahead">Category Short Desc</label>
															<div class="controls"><input type="text" class="span15 typeahead" id="shortDesc" name="shortDesc" value=""></div>
														</td>
													</tr>
													
													<!-- Row07 Category Long Desc -->
													<tr>
														<td>
															
									  						<label class="control-label" for="textarea2">Category Long Desc</label>
															<div class="controls">
																<textarea class="cleditor" id="longDesc" name="longDesc" rows="3"></textarea>
															</div>
														</td>
													</tr>													
													

													<tr>
														<td>
															<label class="control-label" for="date01">Release Date</label>
															<div class="controls"><input type="text" class="input-small datepicker" id="releaseDate" name="releaseDate" value=""></div>
														</td>
													</tr>
													

													<tr>
														<td>
															
															  <label class="control-label" for="fileInput">File input</label>
															  <div class="controls"><input class="input-file uniform_on"  name="productImage" id="productImage" type="file"  onchange="fileSelectHandler()"></div>
															  <div class="error"></div>
															  
														</td>
													</tr>
											<tr>
											<td>
											<div class="step2" style="margin-left:2px;">
												<div style="margin-top: 10px; margin-left:10px; vertical-align:center; text-align:center">
												    <label style="display: inline; color: red">X1 <input type="text" style="width: 2em;" size="4" id="x1" name="x1" readonly="readonly" /></label>
												    <label style="display: inline; color: red">Y1 <input type="text" style="width: 2em;" size="4" id="y1" name="y1" readonly="readonly" /></label>
												    <label style="display: inline; color: red">X2 <input type="text" style="width: 2em;" size="4" id="x2" name="x2" readonly="readonly" /></label>
												    <label style="display: inline; color: red">Y2 <input type="text" style="width: 2em;" size="4" id="y2" name="y2" readonly="readonly" /></label>
												    <label style="display: inline; color: red">W <input type="text"  style="width: 2em;" size="4" id="w" name="w" readonly="readonly" /></label>
												    <label style="display: inline; color: red">H <input type="text"  style="width: 2em;" size="4" id="h" name="h" readonly="readonly" /></label>
											    </div>
											</div>
											</td>
											</tr>
												</table>
											</td>
											
											<!-- center -->
											<td width="55%">
												<div class="step2" >
													<div style="display:table-cell; vertical-align:middle; text-align:center">
														<img id="preview" />
											   		</div>
												</div>
											</td>	
										</tr>
									</table>
							  <div class="form-actions">
							  <button type="submit" class="btn btn-primary">Save changes</button>
							  <button type="reset" class="btn">Cancel</button>
							</div>
						  </fieldset> 
						</form>   

					</div>
				</div>
				<!--/span-->
			</div>
			<!--/row-->

			<!-- 01. Table one End -->


			<!-- 02. Table one Start -->
			<div class="row-fluid sortable">
				<div class="box span12">
					<div class="box-header well" data-original-title>
						<h2>
							<i class="icon-user"></i> Cosmetic
						</h2>
						<div class="box-icon">
							<a href="#" class="btn btn-setting btn-round"><i
								class="icon-cog"></i></a> <a href="#"
								class="btn btn-minimize btn-round"><i
								class="icon-chevron-up"></i></a> <a href="#"
								class="btn btn-close btn-round"><i class="icon-remove"></i></a>
						</div>
					</div>
					<div class="box-content">
						<table
							class="table table-striped table-bordered bootstrap-datatable datatable">
							<thead>
								<tr>
									<th>ProductName</th>
									<th>ProductImage</th>
									<th>ReleaseDate</th>
									<th>ProductPrice</th>
									<th>ProductDesc</th>
									<th>Actions</th>
								</tr>
							</thead>
							<tbody>
							
							
							<s:iterator value="inventoryItemList" >
                                <tr>
                                    <td><s:property value="title" /></td>
                                    <td><img src='<s:url action="imageReceiveAction" > <s:param name="imageId"><s:property value="inventoryItemID" /></s:param> </s:url>' 
		                                     alt="Smiley face"  
		                                     height="180" 
		                                     width="180" 
		                                     align="left" />
                                    </td>
                                    <td><s:property value="price" /></td>
                                    <td><s:property value="weight" /></td>
                                    <td><s:property value="shortDesc" /></td>
                                    <!--  <td><span class="label label-success"><s:property value="type" /></span></td>-->
									<td class="center">
										<a class="btn btn-success" href="#"> <i class="icon-zoom-in icon-white"></i> View </a> 
										<a class="btn btn-info" href="#"> <i class="icon-edit icon-white"></i> Edit </a> 
										<a class="btn btn-danger" href='memberDelAction.do?deleteId=<s:property value="id"/>' onclick=""> <i class="icon-trash icon-white"></i> Delete </a>
									</td>                                    
                                </tr>
                              </s:iterator>
							</tbody>
						</table>
					</div>
				</div>
				<!--/span-->
			</div>
			<!--/row-->
			<!-- 02. Table one End -->

		</div>
		<!--/fluid-row-->

		<hr>

		<div class="modal hide fade" id="myModal">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">Ã</button>
				<h3>Settings</h3>
			</div>
			<div class="modal-body">
				<p>Here settings can be configured...</p>
			</div>
			<div class="modal-footer">
				<a href="#" class="btn" data-dismiss="modal">Close</a> <a href="#"
					class="btn btn-primary">Save changes</a>
			</div>
		</div>

		<!-- Header file -->
		<jsp:include page="100-footer.jsp" flush="true" />

	</div>
	<!--/.fluid-container-->

	<!-- Header file -->
	<jsp:include page="100-js.jsp" flush="true" />
	<!-- Jcrope JS File -->
    <script src="./js/jcrop/jquery.Jcrop.js"></script>
    <script src="./js/jcrop/image.Jcrop.js"></script>

</body>
</html>
